import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        let bgColor = '#03171f';
        let color = ['#488cf7', '#765deb', '#3862d8', '#6a89E2', '#219CF9', '#6efbbf', '#40c057', '#ffd351', '#ff8e43', '#f56b6d'];
        let echartData = [{
            name: "注射穿刺器械",
            value: "30.1"
        },
        {
            name: "普通诊察器械",
            value: "20.1"
        },
        {
            name: "基础外科手术器械",
            value: "36.1"
        },
        {
            name: "介用器材",
            value: "70.1"
        },
        {
            name: "医用冷疗",
            value: "60.1"
        },
        {
            name: "中医器械",
            value: "50.1"
        },
        {
            name: "口腔科材料",
            value: "40.1"
        },
        ];

        let formatNumber = function (num) {
            let reg = /(?=(\B)(\d{3})+$)/g;
            return num.toString().replace(reg, ',');
        }
        let total = echartData.reduce((a, b) => {
            return a + b.value * 1
        }, 0);

        const option = {
            backgroundColor: bgColor,
            color: color,
            tooltip: {
                trigger: 'item'
            },
            title: [{
                top: 'center',
                left: 'center',
                textStyle: {
                    rich: {
                        name: {
                            fontSize: 14,
                            fontWeight: 'normal',
                            color: '#fff',
                            padding: [10, 0]
                        },
                        val: {
                            fontSize: 3,
                            fontWeight: 'bolder',
                            color: '#fff',
                        }
                    }
                }
            }, {
                text: '单位：个',
                top: 20,
                left: 20,
                textStyle: {
                    fontSize: 14,
                    color: '#666666',
                    fontWeight: 400
                },
                show: false
            }],
            series: [{
                type: 'pie',
                roseType: 'radius',
                radius: ['15%', '60%'],
                center: ['50%', '50%'],
                data: echartData,
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        borderColor: bgColor,
                        borderWidth: 2
                    }
                },
                labelLine: {
                    normal: {
                        length: 20,
                        length2: 20,
                        lineStyle: {
                            // color: '#e6e6e6'
                        }
                    }
                },
                label: {
                    normal: {
                        formatter: params => {
                            return (
                                '{icon|●}{name|' + params.name + '}\n{value|' +
                                formatNumber(params.value) + '%' + '}'
                            );
                        },
                        // padding: [0 , -100, 25, -100],
                        rich: {
                            icon: {
                                fontSize: 10,
                                color: 'inherit'
                            },
                            name: {
                                fontSize: 9,
                                padding: [0, 0, 0, 10],
                                color: '#fff'
                            },
                            value: {
                                fontSize: 10,
                                fontWeight: 'bolder',
                                padding: [10, 0, 0, 20],
                                color: 'inherit'
                                // color: '#333333'
                            }
                        }
                    }
                },
            }]
        };



        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '22vw', height: '15vw', maxWidth: '22vw', maxHeight: '15vw' }}></div>;
};

export default EChartsComponent;

